import React, { useEffect, useRef, useState } from "react";
import style from "./recom.module.css";
import img1 from "../../assets/img1.png";
import img2 from "../../assets/img2.png";
import img3 from "../../assets/img3.png";
import img4 from "../../assets/img4.png";
import img5 from "../../assets/img5.png";
import img6 from "../../assets/img6.png";
import img7 from "../../assets/img7.png";
import winter from "../../assets/winter.png";
import { icons } from "../../compoents/icons";
import RecomTabs from '../../compoents/RemTab'
import {DoubleLeftOutlined,} from "@ant-design/icons";
import Photo from "../../compoents/commont/Photo";
import AI from "../../compoents/commont/AI";
import Libs from "../../compoents/commont/Libs";
import { icon2 } from "../../compoents/icons";
import Search from "antd/es/transfer/search";
import { Tabs } from "antd";
import type { TabsProps } from "antd";
import MyModal from "../../compoents/commont/Mymodel";
import BottomRight from "../../compoents/commont/BottomRight";

const Index: React.FC = () => {


  // 返回顶部
  const [isModalOpen, setIsModalOpen] = useState(false);

  const height = "200px";
  const [showTabs, setShowTabs] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [fillteredSuggestions, setFilteredSuggestions] = useState([]);
  const searchRef = useRef(null);
  const tabRef = useRef(null);
  const handleSearchClick = () => {
    setShowTabs(true);
  };
  const handleClickOutside = (event) => {
    if (
      searchRef.current &&
      !searchRef.current.contains(event.target) &&
      tabRef.current &&
      !tabRef.current.contains(event.target)
    ) {
      setShowTabs(false);
    }
  };
  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  const [items, setItems] = useState<TabsProps["items"]>([
    {
      key: "1",
      label: "模版",
      children: "Content of Tab Pane 1",
    },
    {
      key: "2",
      label: "素材",
      children: "Content of Tab Pane 2",
    },
    {
      key: "3",
      label: "我的设计",
      children: "内容",
    },
  ]);
  const onChange = (key: string) => {
    let token = localStorage.getItem("token");
    console.log(token, "token");
    if (key === "3") {
      if (!token) {
        alert("请登录后查看内容");
        setIsModalOpen(true);
        setShowTabs(false);
      } else {
        console.log("切换到我的设计");
      }
    } else {
      console.log(key);
    }
  };
  const handleCloseModal = () => {
    setIsModalOpen(false);
    setShowTabs(true);
  };
  const fetchSuggestions = async (query) => {
    const allSuggestions = [
      "设计",
      "创意",
      "灵感",
      "方案",
      "中秋",
      "工具",
      "素材",
    ];
    return allSuggestions.filter((suggestion) =>
      suggestion.toLowerCase().includes(query.toLowerCase())
    );
  };
  const handleSearchChange = async (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    if (value.trim() === "") {
      setShowSuggestions(false);
      setFilteredSuggestions([]);
    } else {
      const suggestions = await fetchSuggestions(value);
      setFilteredSuggestions(suggestions);
      setShowSuggestions(true);
    }
  };

  const highlightSearchTerm = (text) => {
    if (!searchTerm) return text;
    const regex = new RegExp(`(${searchTerm})`, "gi");
    const parts = text.split(regex);
    return parts.map((part, index:number) => {
      regex.test(part) ? (
        <span key={index} className={style.hlight}>
          {part}
        </span>
      ) : (
        part
      );
    });
  };
  const handleSuggestionClick = (suggestion) => {
    setSearchTerm(suggestion);
    setShowSuggestions(false);
  };

  return (
    <div className={style.box}>
      <div className={style.sw}>
        <Libs height={height} imgs={icon2}></Libs>
        <div
          className={style.search}
          onClick={handleSearchClick}
          tabIndex="0"
          ref={searchRef}
        >
          {/* 吸顶效果 */}
          <Search
            placeholder="搜索"
            onSearch={handleSearchChange}
            enterButton
            value={searchTerm}
            onChange={handleSearchChange}
          />
        </div>
        <div className={style.span}>
          <span>你可能想找:</span>
          <span>中秋</span>
          <span>小红书</span>
          <span>简历</span>
          <span>免费</span>
          <span>招聘</span>
        </div>
        {showTabs && (
          <div
            className={`${style.tab} ${showTabs ? style.show : ""}`}
            ref={tabRef}
          >
            {/* tab切换 */}
            <Tabs
              defaultActiveKey="1"
              onChange={onChange}
              centered
              className={style.tabs}
            >
              {items.map((item) => (
                <Tabs.TabPane tab={item.label} key={item.key}>
                  {/* 选项卡内容 */}
                  <div>{highlightSearchTerm(item.children)}</div>

                  {/* 根据 showSuggestions 渲染建议列表 */}
                  {showSuggestions && (
                    <ul className={style.suggestions}>
                      {fillteredSuggestions.map((suggestion, index) => (
                        <li
                          key={index}
                          onMouseDown={() => handleSuggestionClick(suggestion)}
                        >
                          {suggestion}
                        </li>
                      ))}
                    </ul>
                  )}
                </Tabs.TabPane>
              ))}
            </Tabs>
          </div>
        )}
        <MyModal isModalOpen={isModalOpen} onClose={handleCloseModal}></MyModal>
      </div>
      <div className={style.main}>
        <div className={style.main3}>
          <div className={style.title}>
            {/* 上边部分 */}
            <div className={style.top}>
              {icons &&
                icons.map((item, index: number) => {
                  return (
                    <div className={style.top_item} key={index}>
                      <img src={item.img} alt="" />
                      <div>{item.title}</div>
                    </div>
                  );
                })}
            </div>
            {/* 下边部分 */}
            <div className={style.bottom}>
              <div className={style.leftbox}>
                <h2>精选内容</h2>
                <div className={style.textbox}>
                  <div className={style.text}>
                    <div className={style.text1}>
                      <h3>中秋放假通知</h3>
                      <p>爆款中秋放假通知大合集</p>
                    </div>
                    <img src={img1}></img>
                  </div>
                  <div className={style.text}>
                    <div className={style.text1}>
                      <h3>金九银十招聘季</h3>
                      <p>海量物料助力寻才</p>
                    </div>
                    <img src={img2}></img>
                  </div>
                  <div className={style.text}>
                    <div className={style.text1}>
                      <h3>每日模版上新速递</h3>
                      <p>抢先体验最新原创模版</p>
                    </div>
                    <img src={img3}></img>
                  </div>
                </div>
              </div>
              <div className={style.rightbox}>
                <div className={style.rightitle}>
                  <h2>常用场景</h2>
                  <h4>更多&gt;</h4>
                </div>
                <div className={style.styleright}>
                  <div className={style.rightboxs}>
                    <h3>邀请函</h3>
                    <div className={style.rightimg}>
                      <img src={img7}></img>
                    </div>
                  </div>
                  <div className={style.rightboxs}>
                    <h3>手机海报</h3>
                    <div className={style.rightimg}>
                      <img src={img4}></img>
                    </div>
                  </div>
                  <div className={style.rightboxs}>
                    <h3>公众号首页</h3>
                    <div className={style.rightimg}>
                      <img src={img5}></img>
                    </div>
                  </div>
                  <div className={style.rightboxs}>
                    <h3>小红书配图</h3>
                    <div className={style.rightimg}>
                      <img src={img6}></img>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {/* 下标 */}
            <div className={style.icon}>
              <DoubleLeftOutlined />
            </div>
          </div>
        </div>
        <div className={style.main1}>
          <div className={style.main1left}>
            <h2>创建设计</h2>
            <div className={style.design}>
              <div className={style.designtop}>
                <button className={style.bfn}>+</button>
                <p>开始设计</p>
              </div>
              <div className={style.designbottom}>
                <div className={style.db}>
                  <img src={winter}></img>
                </div>
                <div className={style.dbc}>
                  <img src={winter}></img>
                </div>
                <div className={style.dbr}>&gt;</div>
              </div>
            </div>
          </div>
          <Photo></Photo>
          <AI></AI>
        </div>
        {/* tab切换 */}
        <RecomTabs></RecomTabs>
      </div>
      {/* 右下角 */}
     <BottomRight></BottomRight>
    </div>
  );
};

export default Index;
